<template>
  <scroll ref="suggest"
          class="suggest"
          :data='result'
          :pullup='pullup'
          @scrollToEnd='searchMore'>
    <ul class="suggest-list">
      <li  class="suggest-item" v-for='(i, index) in result' :key='index' @click="selectItem(i)">
        <div class="name">
          <p class="text1">{{i.name}}</p>
          <p class="text2">{{i.singer}}-{{i.album}}</p>
        </div>
      </li>
      <loading v-show='hasMore'></loading>
    </ul>
    <div v-show="!result.length" class="no-result-wrapper">
      <no-result title="抱歉，暂无搜索结果"></no-result>
    </div>
  </scroll>
</template>

<script type="text/ecmascript-6">
import Scroll from 'base/scroll/scroll'
import Loading from 'base/loading/loading'
import NoResult from 'base/no-result/no-result'
import {search} from 'api/search'
import {createSong} from 'common/js/song'
import {mapMutations, mapActions} from 'vuex'
// import Singer from 'common/js/singer'

const perpage = 30

export default {
  props: {
    query: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      page: 1,
      pullup: true,
      beforeScroll: true,
      hasMore: true,
      result: []
    }
  },
  methods: {
    refresh() {
      this.$refs.suggest.refresh()
    },
    selectItem(item) {
      this.insertSong(item)
      // this.$emit('select', item)
    },
    search() {
      // 第一页
      this.page = 0
      // 默认第一次都可以继续加载
      this.hasMore = true
      this.$refs.suggest.scrollTo(0, 0)
      if (!this.query) {
        return
      }
      search(this.query, perpage, this.page).then((res) => {
        if (res.code === 200) {
          this.result = this._normalSongs(res.data.songs)
          this._checkMore(res.data)
        }
      })
    },
    // 重新处理list，将歌曲相关信息存放入song对象中，最后push成json
    _normalSongs(list) {
      let ret = []
      list.forEach((item) => {
        if (item.id) {
          ret.push(createSong(item))
        }
      })
      return ret
    },
    searchMore() {
      if (!this.hasMore) {
        return
      }
      this.page++
      search(this.query, perpage, this.page).then((res) => {
        if (res.code === 200) {
          this.result = this.result.concat(this._normalSongs(res.data.songs))
          this._checkMore(res.data)
        }
      })
    },
    _checkMore(data) {
      let length = data.songs.length
      let nums = data.songCount
      if (!length || this.result.length > nums) {
        this.hasMore = false
      }
    },
    listScroll() {
    },
    getDisplayName(item) {
    },
    getIconCls(item) {
    },
    ...mapMutations({
      setSinger: 'SET_SINGER'
    }),
    ...mapActions([
      'insertSong'
    ])
  },
  watch: {
    query(newQuery) {
      this.search(newQuery)
    }
  },
  components: {
    Scroll,
    Loading,
    NoResult
  }
}
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  @import "~common/stylus/variable"
  @import "~common/stylus/mixin"

  .suggest
    height: 100%
    overflow: hidden
    .suggest-list
      // padding: 0 30px
      .suggest-item
        padding: 15px 0 10px 8px
        display: flex
        align-items: center
        border-top: 1px solid #eee
      .name
        flex: 1
        font-size: $font-size-medium
        color: #000
        overflow: hidden
        .text1
          color: #000
          no-wrap()
        .text2
          color: #999
          margin-top: 5px
          font-size: 6px
          no-wrap()
    .no-result-wrapper
      position: absolute
      width: 100%
      top: 50%
      transform: translateY(-50%)
</style>